<script>
export default {
  name: "index.vue"
}


</script>

<template>

  <div class="container">
    <div class="left" style="overflow-y:scroll;overflow-x:hidden;height:100%">
      <h2>耗材维护</h2>
      <SUPPLIES />
    </div>
    <div class="right" style="overflow-y:scroll;overflow-x:hidden;height:100%">
      <h2>耗材包维护</h2>
      <PACKAGES />
    </div>

  </div>

</template>



<style scoped lang="scss">
.container {
  display: flex; /* 使用 Flexbox 布局 */
  height: 100vh; /* 使容器占满视口高度 */
}

.left {
  width: 50%; /* 左侧区域占 50% 宽度 */
  background-color: #ffffff; /* 背景颜色 */
  padding: 10px; /* 内边距 */
}

.right {
  display: flex;
  flex-direction: column; /* 右侧区域使用纵向布局 */
  width: 50%; /* 右侧区域占 50% 宽度 */
}

.right-top,
.right-bottom {
  flex: 1; /* 两个区域等比例分配垂直空间 */
  padding: 10px; /* 内边距 */
}

.right-top {
  background-color: #ffffff; /* 背景颜色 */
}

.right-bottom {
  background-color: #ffffff; /* 背景颜色 */
}
</style>

<script>
import SUPPLIES from '../supplies/index.vue';
import PACKAGES from '../packages/index.vue';

export default {
  name: 'MainPage',
  components: {
    SUPPLIES,
    PACKAGES,
  }
};
</script>
